<script setup lang="ts">
import {useFetchList} from '@/hooks/table/useFetchList'
import {
  addPhoneNumberRoute,
  deletePhoneNumberRoute,
  editPhoneNumberRoute,
  getDetail,
  getList
} from '@/apis/callingConfigure/phoneNumberRout'
import {columns} from "@/views/CallingConfigure/PhoneNumberRoute/consts/tableColumns";
import {message} from "ant-design-vue";
import {PlusOutlined} from "@ant-design/icons-vue";

const query = reactive({
  callerNum: '',
  routeNum: '',
  beginTime: '',
  endTime: ''
})
const {tableData, handleSearch, handleTableChange, pagination, loading, initTable} = useFetchList(
    getList,
    query
)
onMounted(() => {
  handleSearch()
})
// 状态映射
const statusMap: Record<string, any> = {
  '1': {color: 'green', text: '启用'},
  '0': {color: 'red', text: '未启用'}
}


const handleDelete = async (id: string | number) => {
  const res = await deletePhoneNumberRoute({id})
  if (res.code === 200) {
    message.success('删除成功')
    handleSearch()
    return
  }
  message.error('删除失败')
}

const handleEdit = async (record: any) => {
  const res = await getDetail({id: record.id})
  if (res.code === 200) {
    drawTitle.value = '编辑号码路由'
    formState = reactive({...res.data})
    formState.status = res.data.type + ''
    open.value = true
    return
  }
}

const drawTitle = ref<string>('新增号码路由')
const open = ref<boolean>(false)
let formState = reactive({
  id: '',
  callerNum: '',
  routeNum: '',
  lenMin: '',
  lenMax: '',
  callerPattern: '',
  callerReplaceNum: '',
  calleePattern: '',
  calleeReplaceNum: '',
  status: '',
  routeRelList: [] as CallRouteRel[]
})

interface CallRouteRel {
  callRouteId: string,
  gatewayConfigId: string,
  orderNum: number
}

const formRef = ref()
const handleAdd = () => {
  drawTitle.value = '新增号码路由'
  open.value = true
}

const closeDrawer = () => {
  formRef.value.resetFields()
  formState = reactive({
    id: '',
    callerNum: '',
    routeNum: '',
    lenMin: '',
    lenMax: '',
    callerPattern: '',
    callerReplaceNum: '',
    calleePattern: '',
    calleeReplaceNum: '',
    status: '',
    routeRelList: []
  })
  open.value = false
}

const handleSubmit = () => {
  formRef.value.validate().then(async () => {
    const fn = formState.id ? editPhoneNumberRoute : addPhoneNumberRoute
    const res = await fn({
      ...formState
    })
    if (res.code === 200) {
      message.success('操作成功！')
      closeDrawer()
      formState.id ? handleSearch() : initTable()
      return
    }
    message.error('操作失败！')
  }).cache(() => {
    console.log('error')
  })
}

const rules = reactive({
  callerNum: [{required: true, message: '请输入主叫号码', trigger: 'blur'}],
  routeNum: [{required: true, message: '请输入路由号码', trigger: 'blur'}],
  lenMin: [{required: true, message: '请输入号码匹配最小长度', trigger: 'blur'}],
  lenMax: [{required: true, message: '请输入号码匹配最大长度', trigger: 'blur'}],
})

</script>
<template>
  <div class="base-search mb8">
    <div class="base-search-form-normal">
      <a-input
          class="mb8"
          style="width: 240px"
          v-model:value="query.callerNum"
          placeholder="请输入主叫号码"
      />
      <a-input
          class="mb8"
          style="width: 240px"
          v-model:value="query.routeNum"
          placeholder="请输入路由号码"
      />
    </div>
    <a-button type="primary" @click="handleSearch">查询</a-button>
  </div>
  <div class="base-table-content">
    <a-button class="mb8 fr" @click="handleAdd">
      <PlusOutlined/>
      新增
    </a-button>
    <a-table
        :columns="columns"
        :data-source="tableData"
        bordered
        :pagination="pagination"
        @change="handleTableChange"
        :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operate'">
          <a-button @click="handleEdit(record)" type="link">
            <FormOutlined/>
            编辑
          </a-button>
          <a-button @click="handleDelete(record.id)" type="link">
            <DeleteOutlined/>
            删除
          </a-button>
        </template>
        <template v-else-if="column.dataIndex === 'status'">
          <a-tag :color="statusMap[record.status]?.color">
            {{ statusMap[record.status]?.text }}
          </a-tag>
        </template>
      </template>
    </a-table>
    <a-drawer
        v-model:open="open"
        class="custom-class"
        root-class-name="root-class-name"
        :title="drawTitle"
        placement="right"
        :closable="false"
        width="500"
    >
      <a-form
          ref="formRef"
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 15 }"
          autocomplete="off"
          :rules="rules"
      >
        <a-form-item
            label="主叫号码"
            name="callerNum"
        >
          <a-input v-model:value="formState.callerNum"/>
        </a-form-item>
        <a-form-item
            label="路由号码"
            name="routeNum"
        >
          <a-input v-model:value="formState.routeNum"/>
        </a-form-item>
        <a-form-item
            label="号码匹配最小长度"
            name="lenMin"
        >
          <a-input v-model:value="formState.lenMin"/>
        </a-form-item>
        <a-form-item
            label="号码匹配最大长度"
            name="lenMax"
        >
          <a-input v-model:value="formState.lenMax"/>
        </a-form-item>
        <a-form-item
            label="主叫替换规则"
            name="callerPattern"
        >
          <a-input v-model:value="formState.callerPattern"/>
        </a-form-item>
        <a-form-item
            label="主叫替换号码"
            name="callerReplaceNum"
        >
          <a-input v-model:value="formState.callerReplaceNum"/>
        </a-form-item>
        <a-form-item
            label="被叫替换规则"
            name="calleePattern"
        >
          <a-input v-model:value="formState.calleePattern"/>
        </a-form-item>
        <a-form-item
            label="被叫替换号码"
            name="calleeReplaceNum"
        >
          <a-input v-model:value="formState.calleeReplaceNum"/>
        </a-form-item>
        <a-form-item
            label="状态"
            name="status">
          <a-select v-model:value="formState.status" placeholder="请选择状态">
            <a-select-option value="1">启用</a-select-option>
            <a-select-option value="0">未启用</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" style="margin-right: 16px" @click="closeDrawer">取消</a-button>
        <a-button key="submit" type="primary" @click="handleSubmit">提交</a-button>
      </template>
    </a-drawer>
  </div>
</template>
<style scoped lang="less"></style>
